<template>
  <div class="main">
    <div class="search">
      <div>
        <h2>访问权限设置</h2>
      </div>
    </div>
    <div class="jigoucontent">
      <el-card class="box-card jigoucontent_lanmu">
        <el-tree ref="multipleTable" :data="lmtreedata" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.data.name }}</span>
          </span>
        </el-tree>
      </el-card>

      <el-card class="box-card jigoucontent_tree" v-if="isshow">
        <el-alert :title="'当前栏目: '+lmtitle" type="success" :closable="false"></el-alert>
        <div style="height:10px"></div>
        <div class="tree_title">
          <h4>IP白名单列表</h4>
          <el-button type="primary" @click="save" size="mini">新增</el-button>
        </div>
        <ul class="iplist">
          <li v-for="item in iplist">
            <p>
              <i class="el-icon-collection-tag"></i>
              {{item.ip}}</p>
            <div>
              <el-link @click="bianji(item)">编辑</el-link>
              |
              <el-link @click="deleteRow(item.id)">删除</el-link>
            </div>
          </li>
        </ul>
        <div style="height:20px"></div>
        <el-alert
          title="提示"
          type="info"
          :closable="false"
          >
         <p>单独设置：例如 192.168.0.107<br />  网段设置：例如 192.168.0.*<br />
         范围设置：例如 192.168.0.1-192.168.0.255</p>
        </el-alert>

      </el-card>


    </div>

    <div style="width:50%">

    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
      <Form :formobj="formobj" :formdata="formData" ref="form" :formrules="formrules"></Form>
      <div style="padding-left:100px">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { organizationApiqueryAll, organizationApiadd, organizationApiedit, organizationApidelete } from "@/api/organizationApir";
import { columnqueryAll } from "@/api/webpage";
import { ipdel, ipadd,ipqueryPage ,ipupdate} from "@/api/ip";
import Form from "@/components/form.vue"
export default {
  name: "iplist",
  components: {
    Form
  },
  data() {
    let validateIPAddress = (rule, value, callback) => {
      if (value == null) {
        return callback(new Error('IP地址不能为空'));
      }
      let regexp = /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9/*]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9/*]))$/
      let valdata02 = value.split('-');
      let isCorrect = true;
      console.log(valdata02.length);
      if(valdata02.length>1){
        if(regexp.test(valdata02[0]) == false || regexp.test(valdata02[1]) == false){
          isCorrect = false
        }
      }else{
        console.log('只有一个');
        console.log(regexp.test(value));
        if(regexp.test(value) == false){
          isCorrect = false
        }
      }
      if (!isCorrect) {
        callback(new Error('请输入正确的IP地址'));
      } else {
        callback()
      }
    }
    return {
      tableData: [],
      isshow:false,
      params: {
        pageNum:1,
        pageSize:10,
        columnId:''
      },
      query: {
        name: '',
        code: ''
      },
      treedata: [],
      title: '',
      dialogFormVisible: false,
      formData: {
        columnId: '',
        ip: ''
      },
      formobj: [
        { label: "IP", key: "ip", type: "input" },
      ],
      formrules: {
        ip: [
          { required: true, message: "IP地址不能为空", trigger: "blur" },
          { required: true, validator: validateIPAddress, trigger: "blur" }
        ],

      },
      type: '',
      lmtreedata: [],
      lmtitle: '',
      iplist:[],
      lmId:'',
      saveOrgAuthdata: {
        orgId: '',
        columnList: []
      },
      type:'add'
    }
  },
  created() {
    this.getlmlist()
    this.getlist();
  },
  methods: {
    handleNodeClick(val) {
      this.isshow=true
      this.lmtitle = val.name
      this.lmId = val.id
      this.getlist(val.id)
    },
    save() {
      this.dialogFormVisible = true
      this.formData.columnId = this.lmId
    },
    edit(data) {
      this.type = "edit"
      this.formData.id = data.id
      this.dialogFormVisible = true
      this.formData.name = data.name
    },
    append(data) {
      this.type = "add"
      this.formData.parentId = data.id
      this.dialogFormVisible = true
    },
    transTree(list, rootValue) {
      const treeData = []
      list.forEach(item => {
        if(item.code != '000'){


        if (item.parentId === rootValue) {
          const children = this.transTree(list, item.id)
          if (children.length) {
            item.children = children
          }
          treeData.push(item)
        }
      }
      })

      return treeData
    },

    submit() {
      this.$refs.form.getData().then(res => {
        if(this.type=='add'){
          ipadd(res).then((response) => {
            if (response.code == 0) {
              this.$message.success("成功");
              this.dialogFormVisible = false
              this.getlist(this.lmId);
            } else {
              this.$message.error("失败");
            }
          })
            .catch((err) => {
              console.log(err);
            });
        }else{
          ipupdate(res).then((response) => {
            if (response.code == 0) {
              this.$message.success("成功");
              this.dialogFormVisible = false
              this.getlist(this.lmId);
            } else {
              this.$message.error("失败");
            }
          })
            .catch((err) => {
              console.log(err);
            });
        }

      })
    },
    cancel() {
      this.dialogFormVisible = false
    },
    getlmlist() {
      columnqueryAll(this.query).then((res) => {
        if (res.code == 0) {
          this.lmtreedata = this.transTree(res.data, null)
          console.log(res);
        }
      })
    },
    add() {
      this.type = 'add'
      this.dialogFormVisible = true
      this.title = '新增'
    },
    editcontent(row) {
      this.$router.push({
        name: 'addform',
        query: { type: 'edit', id: row.id }
      })
    },
    getlist(id) {
      this.params.columnId = id
      ipqueryPage(this.params).then((res) => {
        if (res.code == 0) {
          this.iplist = res.rows
          console.log(res);
          // this.treedata = this.transTree(res.data, null)
        }
      });
    },
    bianji(item){
      // console.log("🚀 ~ file: index.vue ~ line 246 ~ bianji ~ item", item)
      this.formData.id = item.id
      this.formData.ip = item.ip
      this.type = 'edit'
      this.dialogFormVisible = true
      this.title = '编辑'
    },
    deleteRow(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(id);
          ipdel(ids)
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist(this.lmId);
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });
    },
  }
}
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>
